import { observer } from 'mobx-react'
import React, { useState, useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import {
    Form,
    Input,
    Button,
    Card,
    message,
    Affix,
    InputNumber
} from 'antd'

const { TextArea } = Input

// 表单的字段类型示例
interface formValues {
    dictType: string
    typeEncode: string
    name: string
    describe?: string
}
const AddField: React.FC = () => {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const location = useLocation()
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        const { record } = location.state || {}  // 解构出传递的 record 数据
        if (record) {
            form.setFieldsValue(record)  // 设置表单的初始值
        }
    }, [location.state, form])

    // 提交表单
    const onFinish = async (values: formValues) => {
        console.log('提交数据: ', values)
        try {
          setLoading(true)
          console.log('提交的值:', values)
          message.success('添加成功')
          navigate('/setting/dictMg')
        } catch (error) {
          message.error('添加失败')
        } finally {
          setLoading(false)
        }
    }

    return (
        <div className="add-app-detail">
            <div className="basic-info">
            <div className="title">基本信息</div>
            <Form
                form={form}
                onFinish={onFinish}
                labelCol={{ span: 4 }}
                variant={'filled'}
            >
                <Form.Item
                    label="字典标识"
                    name="typeEncode"
                    rules={[{ required: true, message: '请输入字典标识' }]}
                >
                    <Input placeholder="请输入字典标识" />
                </Form.Item>
                <Form.Item
                    label="字典名称"
                    name="name"
                    rules={[{ required: true, message: '请输入字典名称' }]}
                >
                    <Input placeholder="请输入字典名称" />
                </Form.Item>
                <Form.Item
                    label="数据值"
                    name="value"
                    rules={[{ required: true, message: '请输入数据值' }]}
                >
                    <Input placeholder="请输入数据值" />
                </Form.Item>
                <Form.Item
                    label="排序"
                    name="sort"
                    rules={[{ required: true, message: '请输入排序' }]}
                >
                    <InputNumber style={{ width: '100%' }} placeholder="请输入排序" />
                </Form.Item>
                <Form.Item
                    label="描述"
                    name="describe"
                >
                    <TextArea rows={4} placeholder="请输入描述，最多不超过200字。" maxLength={200} />
                </Form.Item>
                <div className="form-actions">
                    <Button type="primary" htmlType="submit" loading={loading}>
                        保存
                    </Button>
                    <Button onClick={() => navigate(-1)}>
                        返回
                    </Button>
                </div>
            </Form>
            </div>
        </div>
    )
}

export default observer(AddField)
